<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jQuery.js"></script>
    <title>Document</title>
    <style>
        .table2 {
            undefined border: #C8C8C8 solid;
            border-width: 1px 0px 0px 1px;
            background: #F3F0F0;
            margin-top: 25px;
        }

        .td0 {
            undefined border: #C8C8C8 solid;
            border-width: 0 0 1px 0;
        }

        .td2 {
            undefined border: #C8C8C8 solid;
            border-width: 0 1px 1px 0;
        }

        .barcon {
            undefined width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .barcon1 {
            undefined font-size: 17px;
            float: left;
            margin-top: 20px;
        }

        .barcon2 {
            undefined float: right;
        }

        .barcon2 ul {
            undefined margin: 20px 0;
            padding-left: 0;
            list-style: none;
            text-align: center;
        }

        .barcon2 li {
            undefined display: inline;
        }

        .barcon2 a {
            undefined font-size: 16px;
            font-weight: normal;
            display: inline-block;
            padding: 5px;
            padding-top: 0;
            color: black;
            border: 1px solid #ddd;
            background-color: #fff;
        }

        .barcon2 a:hover {
            undefined background-color: #eee;
        }

        .ban {
            undefined opacity: .4;
        }
    </style>
</head>

<body>
    <table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">

        <tr align="center">
            <th class="td2" height="33" width="150">id</th>
            <th class="td2">用户名</th>
            <th class="td2">联系方式</th>
            <th class="td2">性别</th>
        </tr>


        <tbody id="adminTbody">

            <c:forEach items="${user }" var="user">
                <tr>
                    <td>${user.id}</td>
                    <td>${user.username}</td>
                    <td>${user.tel}</td>
                    <td>${user.sex}</td>

                </tr>
            </c:forEach>


        </tbody>
    </table>


    <div id="barcon" class="barcon">
        <div id="barcon1" class="barcon1"></div>
        <div id="barcon2" class="barcon2">
            <ul>
                <li><a href="###" id="firstPage">首页</a></li>
                <li><a href="###" id="prePage">上一页</a></li>
                <li><a href="###" id="nextPage">下一页</a></li>
                <li><a href="###" id="lastPage">尾页</a></li>
                <li><select id="jumpWhere">
                    </select></li>
                <li><a href="###" id="jumpPage" οnclick="jumpPage()">跳转</a></li>
            </ul>
        </div>
    </div>
</body>
<script>
    $(function () {
        undefined

        goPage(1, 10);
        var tempOption = "";
        for (var i = 1; i <= totalPage; i++) {
            undefined
            tempOption += '<option value=' + i + '>' + i + '</option>'
        }
        $("#jumpWhere").html(tempOption);
    })


    var pageSize = 0;//每页显示行数
    var currentPage_ = 1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
    var totalPage;//总页数
    function goPage(pno, psize) {
        undefined
        var itable = document.getElementById("adminTbody");
        var num = itable.rows.length;//表格所有行数(所有记录数)

        pageSize = psize;//每页显示行数
        //总共分几页 
        if (num / pageSize > parseInt(num / pageSize)) {
            totalPage = parseInt(num / pageSize) + 1;
        } else {
            totalPage = parseInt(num / pageSize);
        }
        var currentPage = pno;//当前页数
        currentPage_ = currentPage;
        var startRow = (currentPage - 1) * pageSize + 1;
        var endRow = currentPage * pageSize;
        endRow = (endRow > num) ? num : endRow;
        //遍历显示数据实现分页
        /*for(var i=1;i<(num+1);i++){    
            var irow = itable.rows[i-1];
            if(i>=startRow && i<=endRow){undefined
                irow.style.display = "";    
            }else{undefined
                irow.style.display = "none";
            }
        }*/

        $("#adminTbody tr").hide();
        for (var i = startRow - 1; i < endRow; i++) {
            undefined
            $("#adminTbody tr").eq(i).show();
        }
        var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
        document.getElementById("barcon1").innerHTML = tempStr;

        if (currentPage > 1) {
            undefined
            $("#firstPage").on("click", function () {
                undefined
                goPage(1, psize);
            }).removeClass("ban");
            $("#prePage").on("click", function () {
                undefined
                goPage(currentPage - 1, psize);
            }).removeClass("ban");
        } else {
            undefined
            $("#firstPage").off("click").addClass("ban");
            $("#prePage").off("click").addClass("ban");
        }

        if (currentPage < totalPage) {
            undefined
            $("#nextPage").on("click", function () {
                undefined
                goPage(currentPage + 1, psize);
            }).removeClass("ban")
            $("#lastPage").on("click", function () {
                undefined
                goPage(totalPage, psize);
            }).removeClass("ban")
        } else {
            undefined
            $("#nextPage").off("click").addClass("ban");
            $("#lastPage").off("click").addClass("ban");
        }

        $("#jumpWhere").val(currentPage);
    }


    function jumpPage() {
        undefined
        var num = parseInt($("#jumpWhere").val());
        if (num != currentPage_) {
            undefined
            goPage(num, pageSize);
        }
    }
</script>

</html>